{% extends 'course/base.html' %}
{% load staticfiles %}
{% block content %}

<!-- Page Heading -->
<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">
            Lectures Notes
        <small></small>
        </h1>
        <ol class="breadcrumb">
            <li>
                <i class="fa fa-university"></i>  <a href="/courses">Courses</a>
            </li>
            <li>
                <i class="fa fa-compass"></i> {{ course.title }}
            </li>
            <li>
                <i class="fa fa-video-camera"></i> <a href="/course/{{ course.id }}/lectures">Lectures</a>
            </li>
            <li class="active">
                <i class="fa fa-file-o"></i> Lecture Notes
            </li>
        </ol>
    </div>
</div>
<!-- /.row -->

<!-- Weeks & Lectures -->
{% include "course/lecture_note/table.html" %}
<!-- /.row -->

<script>    
    /**
     *  Function will call AJAX function to load the video player modal for the lecture.
     */
    function ajax_view_lecture_note(upload_id)
    {
        var url = '/course/'+{{ course.id }}+'/lecture/'+{{ lecture.lecture_id }}+'/view_lecture_note';
        
        $('#play_' + upload_id + '_btn').prop("disabled", true); // Lock button
        $.ajax( url, {
           data: {
                'csrfmiddlewaretoken': '{{ csrf_token }}',
                'upload_id': upload_id
           },
           type: 'post',
           success: function(result) {
                // success code execution here
                $('#ajax_modal_placeholder').html(result); // Update UI.
                $('#lecture_modal').modal();           // Unhide view.
           },
           error: function(xhr,status,error) {
                // error code here
           },
           complete: function(xhr,status) {
                // completion code here
           }
        });
    }
</script>

<!-- Modal -->
<div id="ajax_modal_placeholder"
   name="ajax_modal_placeholder"></div>
<!-- /.Modal -->

{% endblock content %}
